Neocities allows me to do two things that I have been meaning to do for ages. Firstly, start some sort of blog; a collection of articles that I find interesting with perhaps some commentary, and a discussion of some of the things that I am doing. This will hopefully help with my writing, which I am told is woeful. Secondly, it is a way to learn web programming. I have virtually no web programing experience (3 lectures before I dropped out of the class...) but a fair amount of non-web programming. Most notably C, python, IRAF (a toolset for astronomy) and a bit of bash. Most of what I knew about web programming comes from a couple of web scrapers I wrote that I will no doubt talk about at some point. These only dealt with the html, I had no interest in the CSS, and gave up completely when it appeared that I would be forced to deal with javascript. I am also the least artistic person I know and so the prospect of trying to learn "web design" does not thrill me at all. Fortunately, the basics of html and css are fairly easy to learn. Within a few days of starting I have a basic website with a few pages, lists, links and images with a background that is no doubt hideous. There are certainly hundreds of noob errors. I am probably breaking numerous conventions and design standards. This series of posts will document my struggles.
ThefirstthingIneededwasan"webnotes-index.html"file.Thisisthepagethatyou land on when arriving at a url. I managed to create a heading (h1) and center it. A nice looking idea I had seen somewhere was to create a line separating heading from content. Something like this:
This involved creating an empty html div with id=line, with the following css code:
#line {
height:1px;
background:#199;
margin-bottom:1em;
}
(If you are curious, I use the 'pre' tag for code)
I now wanted 2 collumns one for links to things that I wrote and a second for links to outside articles. Why did I make this design decision? No idea. It seemed nice. By the time anyone reads this it will probably have been changed. I created 3 divs with ids of left, right and clear. As expected, 'left' was going to be on the left and 'right' on the right. The css for these guys looked like this:
.left {
float:left;
border: 5px ;
width:55%;
}
.right {
float:right;
border: 5px ;
width:35%;
}
The float variable specified which side of the page they were on. Width
specified what percentage of the width that div would take up and border
left a bit of a gap between then. Note that because of the border, the sum
of the widths != 100%.
Finally, clear. I am less clear (haha) on how
exactly this works, but the documentation states that it prevents anymore
objects floating on the specified side of the stuff above. The css looks
like:
.clear {
clear:both;
}
Finally, I wanted a footer (all good webpages have a footer). I thought that this would be easily done with some more float magic (float:bottom;) but alas, this only floated it to the bottom of the html element. At this time that was only half way down the page and so it looked silly. The final css was as follows:
.footer {
position:absolute;
bottom: 0px;
}
More to come!